package myJs.cps

import myJs.Implicits._
import myJs.myPkg.jquery.$
import org.scalajs.dom.html.Form
import org.scalajs.dom.{Event, html}
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.core.facade.{React, ReactRef}
import slinky.core.{FunctionalComponent, SyntheticEvent, TagElement}
import slinky.web.html._

import scala.collection.immutable.SeqMap
import scala.scalajs.js

/**
 * Created by yz on 21/1/2022
 */
@react object PureCheckboxCp {

  case class Props(checkedMap: SeqMap[String, Boolean], checkedMapChange: SeqMap[String, Boolean] => Unit)

  val component = FunctionalComponent[Props] { props =>

    object FTool {

      def checkedChange(k: String) = (e: SyntheticEvent[input.tagType#RefType, Event]) => {
        val input = e.target
        val checked = input.checked
        val curCheckedMap = props.checkedMap + (k -> checked)
        props.checkedMapChange(curCheckedMap)
      }


    }

    props.checkedMap.map { case (k, isChecked) =>
      div(key := s"${k}", style := Style(paddingLeft = "0px", marginTop = 7), className := "col-sm-3",
        input(
          style := Style(marginRight = "7px"),
          className := "basicInfo",
          `type` := "checkbox",
          name := "geneTypes[]",
          value := k, checked := isChecked, onChange := FTool.checkedChange(k),
        ),
        label(
          className := "myCheckbox form-check-label",
          k
        )
      )
    }


  }

}
